import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../../../util/adapt';
import { getScreenInfo } from '../../../../../../util/screen';
import statusBarManager from '../../../../../../util/native/statusBarManager';

const { width } = getScreenInfo({});
const barHeight = statusBarManager.getStatusBarHeight();

export default StyleSheet.create({
  container: {
    width,
    height: phonePx(161) + barHeight
  },
  content: {
    marginTop: phonePx(27) + barHeight,
    marginLeft: phonePx(20),
    height: phonePx(64),
    flexDirection: 'row'
  },
  headContent: {
    width: phonePx(64),
    height: phonePx(64)
  },
  head: {
    width: phonePx(64),
    height: phonePx(64),
    borderRadius: phonePx(32),
    overflow: 'hidden'
  },
  sex: {
    width: phonePx(20),
    height: phonePx(20),
    position: 'absolute',
    right: 0,
    bottom: 0
  },
  info: {
    height: phonePx(64),
    marginLeft: phonePx(21)
  },
  nameContent: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    height: phonePx(30),
    marginTop: phonePx(2)
  },
  name: {
    color: '#2A2A2A',
    fontWeight: '600',
    fontSize: phonePx(22),
    lineHeight: phonePx(30),
    maxWidth: phonePx(88)
  },
  phone: {
    color: '#A2A7AD',
    fontSize: phonePx(14),
    lineHeight: phonePx(20),
    marginLeft: phonePx(6)
  },
  edit: {
    width: phonePx(34),
    height: phonePx(30)
  },
  editIcon: {
    width: phonePx(12),
    height: phonePx(12),
    marginLeft: phonePx(11),
    marginTop: phonePx(11)
  },
  goldContent: {
    width: phonePx(85),
    height: phonePx(24),
    marginTop: phonePx(8),
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#FFF6D6',
    borderRadius: phonePx(12),
    borderWidth: phonePx(1),
    borderColor: '#FFC561'
  },
  goldIcon: {
    width: phonePx(14),
    height: phonePx(14),
    marginLeft: phonePx(5)
  },
  goldDesc: {
    color: '#FFA916',
    fontSize: phonePx(12),
    fontWeight: '500',
    marginLeft: phonePx(6)
  }
});
